<template>
  <div class="header" style="background-image: url('//i0.hdslb.com/bfs/archive/17759bd2d61eb97e992642f79a15ddabd015d0dc.png@.webp');">
    <div class="header-layer"></div>
    <a class="header-link" target="_blank" data-loc-id="142"></a>
    <div class="h-center">
      <a class="logo" href="//www.bilibili.com/index.html" style="background-image: url('//i0.hdslb.com/bfs/archive/58d322146cb4b1685a5775478b9753f96a0c2ff6.png@.webp')"></a>
      <div class="search">
        <form id="searchform" action="//search.bilibili.com/all" target="_blank">
          <input class="search-keyword" id="search-keyword" name="keyword" type="text" autocomplete="off" accesskey="s" x-webkit-speech x-webkit-grammar="builtin:translate" placeholder="社会我蕾姐，变身！" data-recommend="av11288716"/>
          <button class="search-submit" type="submit"></button>
        </form>
        <a class="link-ranking" href="//www.bilibili.com/ranking" target="_blank">
          <span>排行榜</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'bheader',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  }
};
</script>

<style lang="stylus" scoped>
  .header
    background transparent no-repeat center -10px
    position relative
    margin -42px auto 0
    .header-layer,
    .header-link
      position absolute
      top 0
      left 0
      width 100%
      height 170px
      z-index 5
    .h-center
      width 980px
      margin 0 auto
      position relative
      height 170px
      transition .2s height
      .logo
        position absolute
        width 220px
        height 105px
        left 24px
        top 55px
        background transition no-repeat left center
        z-index 100
      .search
        position absolute
        bottom 20px
        right 0
        width 268px
        height 32px
        padding 2px 2px 2px 72px
        background-color rgba(0, 0, 0, 0.12)
        border-radius 6px
        font-size 12px
        z-index 10
        #searchform
          background-color rgba(255, 255, 255, 0.88)
          display block
          height 32px
          border-radius 4px
          transition .2s background-color
          .search-keyword
            float left
            width 200px
            color #222
            font-size 12px
            overflow hidden
            height 32px
            line-height 32px
            padding 0 12px
            border 0
            box-shadow none
            background-color transparent
            &:focus
              outline none
          .search-submit
            display block
            position absolute
            right 0
            width 48px
            min-width 0
            cursor pointer
            height 32px
            background: url(../../../static/images/icons.d895b84.png) -653px -720px no-repeat;
            margin 0
            padding 0
            border 0
        .link-ranking
          position absolute
          left 2px
          top 2px
          height 32px
          line-height 32px
          background-color rgba(255, 255, 255, 0.88)
          border-radius 4px
          width 68px
          transition .2s background-color
          span
            padding-left 26px
            color #f25d8e
            display inline-block
            background: url(../../../static/images/icons.d895b84.png) -659px -655px no-repeat;
</style>
